<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>分析图表</title>
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
    $(document).ready(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
        var year = [[${year}]];
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/es",    //请求发送到dataActiont处
            data : {"year":year},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result.code == 1) {
                    myChart.hideLoading();    //隐藏加载动画
                    for(var i=0;i<result.data.length;i++){
                        names.push(result.data[i].name);
                        values.push(result.data[i].num);
                    }
                    myChart.setOption({        //加载数据图表
                        title: {
                            text: year+'年度就业竞争力指数图'
                        },
                        dataset: {
                            source: {
                                'product': names,
                                'amount': values,
                                'score': values
                            }

                        },
                        grid: {},
                        xAxis: {name: '分数'},
                        yAxis: {type: 'category',
                        name: '学院',
                        data: names},
                        series: [
                            {
                                name: '分数',
                                type: 'bar',
                                encode: {
                                    // Map the "amount" column to X axis.
                                    x: 'amount',
                                    // Map the "product" column to Y axis
                                    y: 'product'
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'right',
                                        textStyle: {
                                            color: 'red'
                                        }
                                    }
                                },
                                data:values
                            }
                        ]
                    });
                }else {
                    alert(result.msg);
                    window.close();
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });

</script>

</body>
</html>